
var analysis_vm=new Vue({
    el:'#analysis',
    filters:{
        formatterTime:function(val){
            var oDate=new Date(val);
            var year=oDate.getFullYear();
            var month=oDate.getMonth()+1;
            var date=oDate.getDate();
            var hour=oDate.getHours();
            var minute=oDate.getMinutes();
            return year+'年'+toDou(month)+'月'+toDou(date)+'日  '+toDou(hour)+':'+toDou(minute);
        },
        toStr:function(val){
            return toString(val)
        }

    },
    data:{
        sectionTime:{},
        sectionTimeBoiler:{},
        date:{},
        viewChart:{
            chartArr:[],
            chartId:['chart_'+uuid(6,64),'chart_'+uuid(6,64),'chart_'+uuid(6,64),'chart_'+uuid(6,64),'chart_'+uuid(6,64)],
            chartName:[
                [],
                [],
                ['gaolu345','gaolu12'],
                ['fangsan'],
                []
            ],
            chartData:[
                [
                    {name:'入炉温度',type:'line',lineStyle:'solid',color:'#bd9653'},
                    {name:'出炉温度',type:'line',lineStyle:'solid',color:'#00ccfe'},
                    {name:'温度',type:'line'}
                ],
                [
                    {name:'入炉温度',type:'line',lineStyle:'solid',color:'#bd9653'},
                    {name:'出炉温度',type:'line',lineStyle:'solid',color:'#00ccfe'},
                    {name:'温度',type:'line'}

                ],
                [
                    {name:'入炉温度',type:'line',lineStyle:'solid',color:'#bd9653'},
                    {name:'出炉温度',type:'line',lineStyle:'solid',color:'#00ccfe'},
                    {name:'温度',type:'line'}
                ],
                [
                    {name:'入炉温度',type:'line',lineStyle:'solid',color:'#bd9653'},
                    {name:'出炉温度',type:'line',lineStyle:'solid',color:'#00ccfe'},
                    {name:'温度',type:'line'}
                ],
                [
                    {name:'入炉温度',type:'line',lineStyle:'solid',color:'#bd9653'},
                    {name:'出炉温度',type:'line',lineStyle:'solid',color:'#00ccfe'},
                    {name:'温度',type:'line'}
                ]
            ],
            chartOption:[
                {
                    grid:{
                        left:'5%',
                        top:50,
                        bottom:'15%',
                        right:30
                    },
                    legend:{
                        show:true,
                        textStyle:{
                            color:'#afeafb'
                        },
                        right:0,
                        data:[
                            {
                                name:'入炉温度',
                                icon:'rect'
                            },{
                                name:'出炉温度',
                                icon:'rect'
                            }]
                    },
                    tooltip:{
                        show:true,
                        alwaysShowContent:false,
                        formatter:function(params){
                            var nameArr = [];
                            var valueArr = [];
                            var str = '';
                            for(var i=0;i<params.length;i++){
                                nameArr[i]=params[i].seriesName;
                                valueArr[i]=Number(params[i].data).toFixed(1);

                                str+= nameArr[i]+' : '+valueArr[i]+'<br/>'
                            }
                            return params[0].axisValueLabel+'<br/>'+str
                        }
                    },
                    yAxis:{
                        name:'(℃)'
                    },
                    color:['#bd9653','#00ccfe']
                },
                {
                    grid:{
                        left:'5%',
                        top:50,
                        bottom:'15%',
                        right:30
                    },
                    legend:{
                        show:true,
                        textStyle:{
                            color:'#afeafb'
                        },
                        right:0,
                        data:[
                            {
                                name:'入炉温度',
                                icon:'rect'
                            },{
                                name:'出炉温度',
                                icon:'rect'
                            }]
                    },
                    tooltip:{
                        show:true,
                        alwaysShowContent:false,
                        formatter:function(params){
                            var nameArr = [];
                            var valueArr = [];
                            var str = '';
                            for(var i=0;i<params.length;i++){
                                nameArr[i]=params[i].seriesName;
                                valueArr[i]=Number(params[i].data).toFixed(1);
                                str+= nameArr[i]+' : '+valueArr[i]+'<br/>'
                            }
                            return params[0].axisValueLabel+'<br/>'+str
                        }
                    },
                    yAxis:{
                        name:'(℃)'
                    },
                    color:['#bd9653','#00ccfe']
                },
                {
                    grid:{
                        left:'5%',
                        top:50,
                        bottom:'15%',
                        right:30
                    },
                    legend:{
                        show:true,
                        textStyle:{
                            color:'#afeafb'
                        },
                        right:0,
                        data:[
                            {
                                name:'入炉温度',
                                icon:'rect'
                            },{
                                name:'出炉温度',
                                icon:'rect'
                            }]
                    },
                    yAxis:{
                        name:'(℃)',
                        axisLabel:{
                            formatter:function (value, index) {
                                return value;
                            }
                        }
                    },
                    tooltip:{
                        alwaysShowContent:false,
                        formatter:function(params){
                            var nameArr = [];
                            var valueArr = [];
                            var str = '';
                            for(var i=0;i<params.length;i++){
                                nameArr[i]=params[i].seriesName;
                                valueArr[i]=Number(params[i].data).toFixed(1);

                                str+= nameArr[i]+' : '+valueArr[i]+'<br/>'
                            }
                            return params[0].axisValueLabel+'<br/>'+str
                        }
                    },
                    color:['#bd9653','#00ccfe']
                },
                {
                    tooltip:{
                        show:true,
                        alwaysShowContent:false,
                        formatter:function(params){
                            var nameArr = [];
                            var valueArr = [];
                            var str = '';
                            for(var i=0;i<params.length;i++){
                                nameArr[i]=params[i].seriesName;
                                valueArr[i]=Number(params[i].data).toFixed(1);

                                str+= nameArr[i]+' : '+valueArr[i]+'<br/>'
                            }
                            return params[0].axisValueLabel+'<br/>'+str
                        }
                    },
                    legend:{
                        show:true,
                        textStyle:{
                            color:'#afeafb'
                        },
                        right:0,
                        data:[
                            {
                                name:'入炉温度',
                                icon:'rect'
                            },{
                                name:'出炉温度',
                                icon:'rect'
                            }]
                    },
                    grid:{
                        left:'5%',
                        top:50,
                        bottom:'15%',
                        right:30
                    },
                    yAxis:{
                        name:'(℃)',
                        axisLabel:{
                            formatter:function (value, index) {
                                return value;
                            }
                        },
                        nameTextStyle:{
                            color:'#b0e9fe',
                            fontSize:12,
                            align:'right',
                            padding:[3, 4, 5, 6]
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#b0e9fe',

                            }
                        },
                        axisTick:{
                            inside:true
                        },
                        splitLine:{
                            show:false
                        }
                    },
                    xAxis:{
                        name:'',
                        nameTextStyle:{
                            color:'#b0e9fe',
                            fontSize:12,
                            align:'right',
                            padding:[1, 1, 5, 1]
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#b0e9fe',

                            }
                        },
                        axisTick:{
                            show:false,
                            inside:false
                        }
                    },
                    color:['#bd9653','#00ccfe']
                },
                {
                    tooltip:{
                        show:true,
                        alwaysShowContent:false,
                        formatter:function(params){
                            var nameArr = [];
                            var valueArr = [];
                            var str = '';
                            for(var i=0;i<params.length;i++){
                                nameArr[i]=params[i].seriesName;
                                valueArr[i]=Number(params[i].data).toFixed(1);

                                str+= nameArr[i]+' : '+valueArr[i]+'<br/>'
                            }
                            return params[0].axisValueLabel+'<br/>'+str
                        }
                    },
                    legend:{
                        show:true,
                        textStyle:{
                            color:'#afeafb'
                        },
                        right:0,
                        data:[
                            {
                                name:'入炉温度',
                                icon:'rect'
                            },{
                                name:'出炉温度',
                                icon:'rect'
                            }]
                    },
                    grid:{
                        left:'5%',
                        top:50,
                        bottom:'15%',
                        right:30
                    },
                    yAxis:{
                        name:'(℃)',
                        axisLabel:{
                            formatter:function (value, index) {
                                return value;
                            }
                        },
                        nameTextStyle:{
                            color:'#b0e9fe',
                            fontSize:12,
                            align:'right',
                            padding:[3, 4, 5, 6]
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#b0e9fe'

                            }
                        },
                        axisTick:{
                            inside:true
                        },
                        splitLine:{
                            show:false
                        }
                    },
                    xAxis:{
                        name:'',
                        nameTextStyle:{
                            color:'#b0e9fe',
                            fontSize:12,
                            align:'right',
                            padding:[1, 1, 5, 1]
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#b0e9fe',

                            }
                        },
                        axisTick:{
                            show:false,
                            inside:false
                        }
                    },
                    color:['#bd9653','#00ccfe']
                }

            ],
            chartAjaxData:[]

        },
        linkList:[
            {link:'gaolu.html',title:'高炉'},
            {link:'hotwind.html',title:'热风炉'},
            {link:'zhagang.html',title:'轧钢'},
            {link:'guolu.html',title:'锅炉'},
            {link:'dongdiao.html',title:'动调'},
            {link:'other.html',title:'其他部门'}
        ],
        isOpen:false,
        timeStamp:0,
        bOk:false,
        isbOk:false,
        boilerName:'',
        username:'',
        admin_guolu:true,
        value1:'',
        value2:'',
        asBok:true,
        analysisList:[
            {link:'analysis_hotwind.html',title:'煤气平衡'},
            {link:'analysis_zhagang.html',title:'轧钢质量'}
        ],
        museOpen:false

    },
    mounted:function(){
        var _this=this;
        this.$nextTick(function(){
            _this.getTimeStamp();
            _this.getName();

            setTimeout(function(){
                _this.getTimeStamp();
                _this.initChart();
                _this.sure('1');
                _this.sure('2');
                _this.sure('3');
                _this.sure('A');
                _this.sure('B');
                _this.getMarkLine();
                //_this.viewChart.chartArr[0].loadData();
            },2000);
        })
    },
    methods:{
        getTimeStamp:function(){
            var _this=this;
            var success=function(res){
                _this.timeStamp=res.data.time;
                //console.log(res.data);
                _this.sectionTime=getSectionhour(_this.timeStamp,8);
                _this.sectionTimeBoiler=getSectionhour(_this.timeStamp,8);
                console.log(_this.sectionTime)
            };
            var error=function(e){
                console.log('加载时间戳出错了');
            };

            this.$http.get(URL+'/time/getTime').then(success,error);
            //this.$http.get('https://www.easy-mock.com/mock/5a9378d56f4c043a27445e58/example/time').then(success,error);
        },
        getName:function(){
            var _this=this;
            var success=function(res){
                _this.username=res.data.username;
                _this.admin_guolu=res.data.admin_guolu
                //console.log(res.data);
            };
            var error=function(e){
                console.log('加载用户名出错了');
            };
            this.$http.get(URL+'/system/getuserinfo').then(success,error);
        },
        initChart:function(){
            var _this=this;
            //右侧
            //热风炉波动归因
            //主管压力超限分析
            this.viewChart.chartArr[0]=new Chart(this.viewChart.chartId[0],{
                data:_this.viewChart.chartData[0],
                baseOption:_this.viewChart.chartOption[0]
            });
            //操作统计
            //高炉减休风率
            this.viewChart.chartArr[1]=new Chart(this.viewChart.chartId[1],{
                data:_this.viewChart.chartData[1],
                baseOption:_this.viewChart.chartOption[1]
            });
            //错峰波动
            //热风炉错峰率
            this.viewChart.chartArr[2]=new Chart(this.viewChart.chartId[2],{
                data:_this.viewChart.chartData[2],
                baseOption:_this.viewChart.chartOption[2]
            });
            //烧炉波动
            //平均放散开度
            this.viewChart.chartArr[3]=new Chart(this.viewChart.chartId[3],{
                data:_this.viewChart.chartData[3],
                baseOption:_this.viewChart.chartOption[3]
            });
            //zhagangtingxian
            this.viewChart.chartArr[4]=new Chart(this.viewChart.chartId[4],{
                data:_this.viewChart.chartData[4],
                baseOption:_this.viewChart.chartOption[4]
            });
        },
        sure:function(name){
            var _this=this;
            var success=function(res){
                var data=res.data;
                if(data.length==0)return;
                _this.getData(name,data);
                /*var axis=getAxis(data);
                 _this.viewChart.chartArr[2].loadX(axis.dataX);
                 _this.viewChart.chartArr[2].loadData('热风炉',axis.dataY);*/
            };
            var error=function(e){
                console.log('加载'+name+'出错了');
            };
            //this.$http(URL+'/message/'+this.furnaceName+'/history?start='+this.valStart+'&end='+this.valEnd).then(success,error);
            this.$http.get(_this.getUrl(name),{start:_this.sectionTime.start,end:_this.sectionTime.end}).then(success,error);
        },
        sureAll:function(){
            var _this=this;
            _this.initChart();
            var _this=this;
            if(_this.sectionTime.start > _this.sectionTime.end){
                alert('结束时间不能小于开始时间');
                return;
            }
            _this.sure('1');
            _this.sure('2');
            _this.sure('3');
            _this.sure('A');
            _this.sure('B');
            _this.getMarkLine();
        },
        getUrl:function(name){
            var url='';
            if(name=='1'){
                //url='https://www.easy-mock.com/mock/5a9378d56f4c043a27445e58/example/zhaxian';
                url=URL+'zhagang/1/bianwen/history';
            }else if(name=='2'){
                 //url='https://www.easy-mock.com/mock/5a9378d56f4c043a27445e58/example/zhaxian';
                url=URL+'zhagang/2/bianwen/history';
            }else if(name=='3'){
                //url='https://www.easy-mock.com/mock/5a9378d56f4c043a27445e58/example/2zhaxian';
                 url=URL+'zhagang/3/bianwen/history';
            }else if(name=='A'){

                // url='https://www.easy-mock.com/mock/5a9378d56f4c043a27445e58/example/1zhaxian';
                url=URL+'zhagang/A/bianwen/history';

            }else if(name=='B'){
                //url='https://www.easy-mock.com/mock/5a9378d56f4c043a27445e58/example/1zhaxian';
                 url=URL+'zhagang/B/bianwen/history';

            }

            return url;
        },
        getData:function(name,data){
            var axis=[];
            var _this=this;
            if(Object.keys(data).length==0)return;
            switch(name){
                case '1':
                    for(var i=0;i<data.length;i++){
                        axis[i]=getAxis(data[i]);
                        _this.viewChart.chartArr[0].loadX(axis[0].dataX,'mdhm');
                        _this.viewChart.chartArr[0].loadData(_this.viewChart.chartData[0][i].name,axis[i].dataY);
                    }

                    break;
                case '2':
                    for(var i=0;i<data.length;i++){
                        axis[i]=getAxis(data[i]);
                        _this.viewChart.chartArr[1].loadX(axis[0].dataX,'mdhm');
                        _this.viewChart.chartArr[1].loadData(_this.viewChart.chartData[1][i].name,axis[i].dataY);
                    }
                    break;
                case '3':
                    //data=Object.values(data);
                    //var chartName=_this.viewChart.chartName[2];
                    for(var i=0;i<data.length;i++){
                        axis[i]=getAxis(data[i]);
                        _this.viewChart.chartArr[2].loadX(axis[0].dataX,'mdhm');
                        _this.viewChart.chartArr[2].loadData(_this.viewChart.chartData[2][i].name,axis[i].dataY);
                    }
                    break;
                case 'A':
                   // var chartName=_this.viewChart.chartName[3];
                    for(var i=0;i<data.length;i++){
                        axis[i]=getAxis(data[i]);
                        //axis[i]=getAxis(data[chartName[i]]);
                        _this.viewChart.chartArr[3].loadX(axis[0].dataX,'mdhm');
                        _this.viewChart.chartArr[3].loadData(_this.viewChart.chartData[3][i].name,axis[i].dataY);
                    }
                    break;
                case 'B':
                    for(var i=0;i<data.length;i++){
                        axis[i]=getAxis(data[i]);
                        _this.viewChart.chartArr[4].loadX(axis[0].dataX,'mdhm');
                        _this.viewChart.chartArr[4].loadData(_this.viewChart.chartData[4][i].name,axis[i].dataY);
                    }
                    break;
                default:
                    console.log(name+'值有误')
                    break;
            }
        },
        getMarkLine:function(){
            var _this = this;
            var success = function(res){

                var markData = res.data;
                var markDataTime =[];
                for(var i=0;i<markData.length;i++){

                    markDataTime[i] = arrtoJson(markData[i],'mdhm');
                    _this.viewChart.chartArr[i].loadMarkline(markDataTime[i]);
                    //_this.zhagangChart.loadMarkline(chartName,MarkData)
                }
            };
            var error = function(){
                console.log('标线加载出错')
            }
            // this.$http('https://www.easy-mock.com/mock/5a9378d56f4c043a27445e58/example/markline',{params:{ids:[1,2]}}).then(success,error)
           this.$http(URL+'zhagang/changeTemperature?ids=1,2,3,A,B&start='+_this.sectionTime.start+'&end='+_this.sectionTime.end,{params:{}}).then(success,error)

        },
        datePicker:function(Val){
            var _this=this;
            laydate({
                istime: true,
                format:'YYYY-MM-DD hh:mm',
                choose:function(dates){ //选择好日期的回调
                    //_this.valStart = dates;
                    var oldTime = (new Date(dates)).getTime();
                    if(Val=='valStart'){
                        _this.sectionTime.start = oldTime
                    }else if(Val=='valEnd'){
                        _this.sectionTime.end = oldTime
                    }
                }
            })
        },
        handleChange:function(date){
            this.date.data1= new Date(date.replace(/-/g, '/'));
            this.sectionTimeBoiler.start = this.date.data1.getTime();
        },
        handleChange1:function(date){
            this.date.data2= new Date(date.replace(/-/g, '/'));
            this.sectionTimeBoiler.end = this.date.data2.getTime();

        }

    }
});